<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax校验用户名是否存在</title>
    <script src="../03jquery/js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            /*
            $.get 和 $.post 方法
            url          表示请求的地址
            data         表示发送给服务器的数据。格式有两种:
                            一: name=value&name=value
                            二: {key:value}
            success      请求成功，响应的回调函数
            dataType     响应的数据类型。常用的数据类型有:json表示json对象、text、xml
            */
            $("input[name='name']").blur(function () {
                    let name = $("input[name='name']").val();
                    $.get({
                        url: "/lishuoboy_javaweb_war_exploded/CheckLoginUserServlet",
                        data: "name=" + name,
                        success:
                            function (data) {
                                $("#userMsg").text(data);
                            },
                        dataType: "text"
                    })
                }
            )
        })
    </script>
</head>
<body>
<form>
    <input type="text" name="name" placeholder="输入用户名"><span id="userMsg" style="color: red"></span><br>
    <input type="submit" value="登录" disabled>
</form>
</body>
</html>